import './ThemeDemo.scss'
import treeData from '../../data/tree.data.json'
import {designPage, reactive} from "plain-ui-composition";
import {Fragment} from 'vue'

import {
    $$message,
    PlButton,
    PlButtonGroup,
    PlCheckbox,
    PlIcon,
    PlInput,
    PlLoading,
    PlNumber,
    PlRadio,
    PlSelectOption,
    PlSelect,
    PlToggle,
    PlTag,
    PlSlider,
    PlRate,
    PlColorPicker,
    PlCascade,
    PlTime,
    PlDate,
    PlUpload,
    PlImage,
    PlImageUploader,
    PlProgressBar,
    PlProgressCircle,
    PlTree,
    PlPagination,
    PlBadge,
    PlArrowStepGroup,
    PlArrowStep,
    PlTooltip,
    PlStepGroup,
    PlStep,
    PlDropdownMenu,
    PlDropdownOption, PlDropdown, PlCard, PlAlert, $$dialog, PlTable, Plc, $$notice, PlcIndex, PlcCheck, PlcInput, PlcNumber, PlcDate, PlcRate, PlcColorPicker, PlcToggle
} from "plain-ui";
import {Win} from "../../data";

const StoryStatus = [
    {label: '基础', status: 'primary'},
    {label: '成功', status: 'success'},
    {label: '警告', status: 'warn'},
    {label: '失败', status: 'error'},
    {label: '帮助', status: 'info'},
]

export const ThemeDemo = designPage(() => {

    const state = reactive({
        data: [] as any[],
        treeData: [
            {
                id: '1',
                name: '一级 1',
                subs: [{
                    id: '1-1',
                    name: '二级 1-1',
                    subs: [{
                        id: '1-1-1',
                        name: '三级 1-1-1'
                    }]
                }]
            }, {
                id: '2',
                name: '一级 2',
                subs: [{
                    id: '2-1',
                    name: '二级 2-1',
                    subs: [{
                        id: '2-1-1',
                        name: '三级 2-1-1'
                    }]
                }, {
                    id: '2-2',
                    name: '二级 2-2',
                    subs: [{
                        id: '2-2-1',
                        name: '三级 2-2-1'
                    }, {
                        id: '2-2-2',
                        name: '三级 2-2-2'
                    }]
                }]
            }, {
                id: '3',
                name: '一级 3',
                subs: [{
                    id: '3-1',
                    name: '二级 3-1',
                    subs: [{
                        id: '3-1-1',
                        name: '三级 3-1-1'
                    }, {
                        id: '3-1-2',
                        name: '三级 3-1-2'
                    }]
                }, {
                    id: '3-2',
                    name: '二级 3-2',
                    subs: [{
                        id: '3-2-1',
                        name: '三级 3-2-1'
                    }]
                }]
            }],
        val: {
            stepIndex: 2,
            index: 1,
            vertical: false,
            mini: true,
            titleAlignBottom: true,
        },
        fontColor: [
            {
                title: '状态字体色',
                data: [
                    {desc: '基础文字', clz: 'pl-text-primary'},
                    {desc: '成功文字', clz: 'pl-text-success'},
                    {desc: '警告文字', clz: 'pl-text-warn'},
                    {desc: '危险文字', clz: 'pl-text-error'},
                    {desc: '提示文字', clz: 'pl-text-info'},
                ],
            },
            {
                title: '其他字体色',
                data: [
                    {desc: '正文', clz: 'pl-text-color'},
                    {desc: '正文(轻)', clz: 'pl-text-color-light'},
                    {desc: '标题', clz: 'pl-title-color'},
                    {desc: '占位符', clz: 'pl-placeholder-color'},
                    {desc: '图标', clz: 'pl-icon-color'},
                    {desc: '禁用文字', clz: 'pl-background-disabled-text'},
                ],
            },
        ],
        statusBackground: {
            title: '状态背景色',
            data: [
                {desc: '基础背景', clz: 'pl-background-primary'},
                {desc: '成功背景', clz: 'pl-background-success'},
                {desc: '警告背景', clz: 'pl-background-warn'},
                {desc: '危险背景', clz: 'pl-background-error'},
                {desc: '提示背景', clz: 'pl-background-info'},
            ],
        },
        disabledBackgroundColor: {
            title: '禁用背景色',
            data: [
                {desc: '禁用背景', clz: 'pl-background-disabled'},
                {desc: '禁用背景(轻)', clz: 'pl-background-disabled-light'},
                {desc: '禁用背景(深)', clz: 'pl-background-disabled-deep'},
            ],
        },
    })

    Win.MockData.data1().then((val: any) => state.data = val.slice(0, 10))

    return () => <div class={'doc-theme'}>
        <div>
            <h1>自定义主题</h1>
            <h2>颜色</h2>
            {state.fontColor.map((list, index) => <Fragment key={index}>
                <div class={'doc-theme-title'}>{list.title}</div>
                <div class="doc-theme-font-color-list">
                    {list.data.map((item) => (
                        <div class={'doc-theme-font-color-item'} key={item.clz}>
                            <div class={item.clz}>{item.desc}</div>
                            <div>.{item.clz}</div>
                        </div>
                    ))}
                </div>
            </Fragment>)}
            <div class="doc-theme-title">{state.statusBackground.title}</div>
            <div class={'doc-theme-background-color-list doc-theme-background-status'}>
                {state.statusBackground.data.map((item) => (
                    <div class={`doc-theme-font-color-item ${item.clz}`} key={item.clz}>
                        <div>
                            <span>{item.desc}</span>
                            <span>{item.clz}</span>
                        </div>
                        <div></div>
                    </div>
                ))}
            </div>
            <div class="doc-theme-title">{state.disabledBackgroundColor.title}</div>
            <div class={'doc-theme-background-color-list doc-theme-background-status doc-theme-background-disabled'}>
                {state.disabledBackgroundColor.data.map(item => (
                    <div class={`doc-theme-font-color-item ${item.clz}`}>
                        <div>
                            <span>{item.desc}</span>
                            <span>{item.clz}</span>
                        </div>
                        <div></div>
                    </div>
                ))}
            </div>

            <h2>组件</h2>
            <div class="doc-theme-title">Button 按钮</div>
            <div class="doc-theme-space-line">
                <PlButton mode="fill">填充按钮</PlButton>
                <PlButton mode="stroke">线条按钮</PlButton>
                <PlButton mode="text">文字按钮</PlButton>
            </div>
            <div class="doc-theme-space-line">
                <PlButton mode="fill" label="基础(primary)" status="primary" onClick={() => $$message.primary(String(Date.now()))}/>
                <PlButton mode="fill" label="成功(success)" status="success" onClick={() => $$message.success(String(Date.now()))}/>
                <PlButton mode="fill" label="警告(warn)" status="warn" onClick={() => $$message.warn(String(Date.now()))}/>
                <PlButton mode="fill" label="错误(error)" status="error" onClick={() => $$message.error(String(Date.now()))}/>
                <PlButton mode="fill" label="帮助(info)" status="info" onClick={() => $$message.info(String(Date.now()))}/>
            </div>
            <div class="doc-theme-space-line">
                <PlButton mode="stroke" label="基础(primary)" status="primary" onClick={() => $$message.primary(String(Date.now()))}/>
                <PlButton mode="stroke" label="成功(success)" status="success" onClick={() => $$message.success(String(Date.now()))}/>
                <PlButton mode="stroke" label="警告(warn)" status="warn" onClick={() => $$message.warn(String(Date.now()))}/>
                <PlButton mode="stroke" label="错误(error)" status="error" onClick={() => $$message.error(String(Date.now()))}/>
                <PlButton mode="stroke" label="帮助(info)" status="info" onClick={() => $$message.info(String(Date.now()))}/>
            </div>
            <div class="doc-theme-space-line">
                <PlButton mode="text" label="基础(primary)" status="primary" onClick={() => $$message.primary(String(Date.now()))}/>
                <PlButton mode="text" label="成功(success)" status="success" onClick={() => $$message.success(String(Date.now()))}/>
                <PlButton mode="text" label="警告(warn)" status="warn" onClick={() => $$message.warn(String(Date.now()))}/>
                <PlButton mode="text" label="错误(error)" status="error" onClick={() => $$message.error(String(Date.now()))}/>
                <PlButton mode="text" label="帮助(info)" status="info" onClick={() => $$message.info(String(Date.now()))}/>
            </div>
            <div class="doc-theme-space-line">
                <PlButtonGroup mode="fill">
                    <PlButton label="丛林"/>
                    <PlButton label="山脉"/>
                    <PlButton label="火山"/>
                </PlButtonGroup>
            </div>
            <div class="doc-theme-title">Icon 图标</div>
            <div class="doc-theme-space-line">
                <PlIcon icon="el-icon-message-solid" status="primary"/>
                <PlIcon icon="el-icon-check-bold" status="success"/>
                <PlIcon icon="el-icon-tools" status="warn"/>
                <PlIcon icon="el-icon-close-bold" status="error"/>
                <PlIcon icon="el-icon-camera-solid" status="info"/>
            </div>

            <div class="doc-theme-title">Input 输入框</div>
            <div class="doc-theme-space-line">
                <PlInput modelValue="ADMIN"/>
            </div>

            <div class="doc-theme-title">Radio 单选</div>
            <div class="doc-theme-space-line">
                <PlRadio label="是否激活" modelValue={true}/>
            </div>

            <div class="doc-theme-title">Checkbox 多选</div>
            <div class="doc-theme-space-line">
                <PlCheckbox label="全选" modelValue={true}/>
            </div>

            <div class="doc-theme-title">Number 数字输入</div>
            <div class="doc-theme-space-line">
                <PlNumber modelValue={100}/>
            </div>

            <div class="doc-theme-title">Loading 加载状态</div>
            <div class="doc-theme-space-line">
                <PlLoading type="alpha" status="primary"/>
                <PlLoading type="beta" status="success"/>
                <PlLoading type="gamma" status="wrn"/>
                <PlLoading type="delta" status="error"/>
                <PlLoading type="ice" status="info"/>
            </div>

            <div class="doc-theme-title">Select 下拉选择</div>
            <div class="doc-theme-space-line">
                <PlSelect modelValue="dangao">
                    <PlSelectOption label="牛奶" val="niunao"/>
                    <PlSelectOption label="蛋糕" val="dangao"/>
                    <PlSelectOption label="蛋挞" val="danta"/>
                </PlSelect>
            </div>

            <div class="doc-theme-title">Toggle 开关</div>
            <div class="doc-theme-space-line">
                <PlToggle modelValue={true}/>
            </div>

            <div class="doc-theme-title">Slider 滑条</div>
            <div class="doc-theme-space-line">
                <PlSlider modelValue={50}/>
            </div>

            <div class="doc-theme-title">Tag 标签</div>
            <div class="doc-theme-space-line">
                <PlTag status="primary" close>标签</PlTag>
                <PlTag status="success" close>标签</PlTag>
                <PlTag status="warn" close>标签</PlTag>
                <PlTag status="error" close>标签</PlTag>
                <PlTag status="info" close>标签</PlTag>
            </div>

            <div class="doc-theme-title">Rate 评分</div>
            <div class="doc-theme-space-line">
                <PlRate modelValue={3}/>
            </div>

            <div class="doc-theme-title">ColorPicker 颜色选择</div>
            <div class="doc-theme-space-line">
                <PlColorPicker modelValue="rgba(242,185,12,1.00)"/>
            </div>

            <div class="doc-theme-title">Cascade 级联选择</div>
            <div class="doc-theme-space-line">
                <PlCascade labelField="" keyField="" childrenField=""/>
            </div>

            <div class="doc-theme-title">Time 时间选择</div>
            <div class="doc-theme-space-line">
                <PlTime modelValue="12:30:00"/>
            </div>

            <div class="doc-theme-title">Date 日期</div>
            <div class="doc-theme-space-line">
                <PlDate modelValue="2020-12-30"/>
            </div>

            <div class="doc-theme-title">Upload 文件上传</div>
            <div class="doc-theme-space-line">
                <div style={{width: '300px'}}>
                    <PlUpload multiple={false} action="" filename=""/>
                </div>
            </div>

            <div class="doc-theme-title">Img 文件上传</div>
            <div class="doc-theme-space-line">
                <PlImage status="empty"/>
                <PlImage status="pending"/>
                <PlImage status="success" src="https://img-blog.csdnimg.cn/c63923ea90924234af36aba464dfdfe7.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center" height="60" width="60"/>
                <PlImage status="error"/>
                <PlImageUploader modelValue="https://img-blog.csdnimg.cn/c63923ea90924234af36aba464dfdfe7.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center" uploadConfig={{} as any}/>
                <PlImageUploader modelValue="???" uploadConfig={{} as any}/>
            </div>

            <div class="doc-theme-title">Progress 进度条</div>
            <div class="doc-theme-space-line">
                <PlProgressBar modelValue={65} status="success" successColor="green"/>
                <PlProgressBar modelValue={65} status="error" errorColor="red"/>
            </div>
            <div class="doc-theme-space-line">
                <PlProgressBar modelValue={65} status="success" successColor="green" inlineText/>
                <PlProgressBar modelValue={65} status="error" errorColor="red" inlineText/>
            </div>
            <div class="doc-theme-space-line">
                <PlProgressCircle modelValue={65} status="success" successColor="green"/>
                <PlProgressCircle modelValue={65} status="error" errorColor="red"/>
            </div>

            <div class="doc-theme-title">Tree 树形组件</div>
            <div class="doc-theme-space-line">
                <div style={{height: '200px', width: '500px', margin: '10px 0'}}>
                    <PlTree
                        data={treeData as any}
                        keyField="id"
                        labelField="name"
                        childrenField="subs"
                        expandOnClickNode/>
                </div>
            </div>

            <div class="doc-theme-title">Pagination 分页器</div>
            <div class="doc-theme-space-line">
                <PlPagination total="20000" pageSize={20} currentPage={1}/>
            </div>

            <div class="doc-theme-title">Badge 标记</div>
            <div class="doc-theme-space-line">
                <PlBadge data={12} status="primary">
                    <PlButton label="消息" mode="stroke" status="info"/>
                </PlBadge>
                <PlBadge data={12} status="warn">
                    <PlButton label="消息" mode="stroke" status="warn"/>
                </PlBadge>
                <PlBadge data={12} status="success">
                    <PlButton label="消息" mode="stroke" status="success"/>
                </PlBadge>
                <PlBadge data={12} status="error">
                    <PlButton label="消息" mode="stroke" status="error"/>
                </PlBadge>
                <PlBadge data={12} status="info">
                    <PlButton label="消息" mode="stroke" status="info"/>
                </PlBadge>
            </div>

            <div class="doc-theme-title">Step 步骤条</div>
            <div class="doc-theme-space-line">
                <PlNumber v-model={state.val.stepIndex}/>
                <PlArrowStepGroup current={state.val.stepIndex}>
                    <PlArrowStep hideIndex>
                        <PlTooltip tooltip={'调用接口，获取token'}>
                            <div>
                                <PlIcon icon="el-icon-s-promotion"/>
                                <span>获取token</span>
                            </div>
                        </PlTooltip>

                    </PlArrowStep>
                    <PlArrowStep hideIndex>
                        <PlTooltip tooltip={'使用token上传logo图片'}>
                            <div>
                                <PlIcon icon="el-icon-upload"/>
                                <span>上传logo</span>
                            </div>
                        </PlTooltip>

                    </PlArrowStep>
                    <PlArrowStep hideIndex>
                        <PlTooltip tooltip={'调用接口创建卡券信息'}>
                            <div>
                                <PlIcon icon="el-icon-s-ticket"/>
                                <span>创建卡券</span>
                            </div>
                        </PlTooltip>
                    </PlArrowStep>
                    <PlArrowStep hideIndex>
                        <PlTooltip tooltip={'调用接口创建二维码'}>
                            <div>
                                <PlIcon icon="el-icon-full-screen"/>
                                <span>创建二维码</span>
                            </div>
                        </PlTooltip>
                    </PlArrowStep>
                    <PlArrowStep hideIndex>
                        <PlTooltip tooltip={'在应用中显示二维码'}>
                            <div>
                                <PlIcon icon="el-icon-camera-solid"/>
                                <span>显示二维码</span>
                            </div>
                        </PlTooltip>
                    </PlArrowStep>
                </PlArrowStepGroup>
            </div>
            <div class="doc-theme-space-line">
                <div class="doc-line">
                    <PlNumber v-model={state.val.index}/>
                    <PlCheckbox label="纵向" v-model={state.val.vertical}/>
                    <PlCheckbox label="迷你尺寸" v-model={state.val.mini}/>
                    <PlCheckbox label="标题放在图标下方" v-model={state.val.titleAlignBottom}/>
                </div>
                <PlStepGroup current={state.val.index}
                             vertical={state.val.vertical}
                             mini={state.val.mini}
                             titleAlignBottom={state.val.titleAlignBottom}
                             currentStatus={state.val.index === 5 ? 'finish' : undefined}>
                    <PlStep title="获取token" message="调用接口，获取token" onClick={() => $$message('获取token')}/>
                    <PlStep title="上传logo" message="使用token上传logo图片" onClick={() => $$message('上传logo')}/>
                    <PlStep title="创建卡券" message="调用接口创建卡券信息" onClick={() => $$message('创建卡券')}/>
                    <PlStep title="创建二维码" message="调用接口创建二维码" onClick={() => $$message('创建二维码')}/>
                    <PlStep title="显示二维码" message="在应用中显示二维码" onClick={() => $$message('显示二维码')}/>
                </PlStepGroup>
            </div>

            <div class="doc-theme-title">Dropdown 下拉按钮</div>
            <div class="doc-theme-space-line">
                <PlDropdown>
                    {{
                        default: <PlButton>Dropdown</PlButton>,
                        popper: <PlDropdownMenu>
                            <PlDropdownOption label="新建 Create" onClick={() => $$message('新建')} icon="el-icon-document-add"/>
                            <PlDropdownOption label="编辑 Edit" onClick={() => $$message('编辑')} disabled icon="el-icon-document"/>
                            <PlDropdownOption label="删除 Delete" onClick={() => $$message('删除')} icon="el-icon-document-remove"/>
                            <PlDropdownOption label="导入 Import" onClick={() => $$message('导入')} disabled icon="el-icon-download"/>
                            <PlDropdownOption label="导出 Export" onClick={() => $$message('导出')} icon="el-icon-upload1"/>
                            <PlDropdownOption label="筛选 Filter" onClick={() => $$message('筛选')} disabled icon="el-icon-crop"/>
                            <PlDropdownOption label="排序 Sort" onClick={() => $$message('排序')} icon="el-icon-s-fold"/>
                            <PlDropdownOption label="多选 Select" onClick={() => $$message('多选')} icon="el-icon-folder-opened"/>
                        </PlDropdownMenu>,
                    }}
                </PlDropdown>
            </div>

            <div class="doc-theme-title">Card 卡片</div>
            <div class="doc-theme-space-line">
                <PlCard title={'圣诞之夜'} shadow={'normal'}>
                    {{
                        default: <>
                            <div>1、有奖竞猜活动</div>
                            <div>2、大转盘抽奖</div>
                            <div>3、海量红包大礼</div>
                        </>,
                        operator: <>
                            <PlDropdown placement={'right'} v-slots={{
                                reference: ({open}) => (
                                    <PlButton mode={'text'}>
                                        <span>更多</span>
                                        <PlIcon icon={open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}/>
                                    </PlButton>
                                ),
                                popper: () => <PlDropdownMenu>
                                    <PlDropdownOption label={'分享'} icon={'el-icon-share'} onClick={() => $$message("分享")}/>
                                    <PlDropdownOption label={'收藏'} icon={'el-icon-star-off'} onClick={() => $$message("收藏")}/>
                                    <PlDropdownOption label={'点赞'} icon={'el-icon-thumb'} onClick={() => $$message("点赞")}/>
                                </PlDropdownMenu>
                            }}/>
                        </>,
                        foot: <>
                            <PlTooltip tooltip={'分享'}>
                                <div class={'pl-card-foot-button'}>
                                    <PlIcon icon={'el-icon-share'}/>
                                </div>
                            </PlTooltip>
                            <PlTooltip tooltip={'收藏'}>
                                <div class={'pl-card-foot-button'}>
                                    <PlIcon icon={'el-icon-star-off'}/>
                                </div>
                            </PlTooltip>
                            <PlTooltip tooltip={'点赞'}>
                                <div class={'pl-card-foot-button'}>
                                    <PlIcon icon={'el-icon-thumb'}/>
                                </div>
                            </PlTooltip>
                        </>
                    }}
                </PlCard>
            </div>

            <div class="doc-theme-title">Alert 提示文本</div>
            <div class="doc-theme-space-line">
                <PlAlert label="默认状态下的提示文本" status="primary"/>
                <br/>
                <PlAlert label="成功状态下的提示文本" status="success"/>
                <br/>
                <PlAlert label="警告状态下的提示文本" status="warn"/>
                <br/>
                <PlAlert label="失败状态下的提示文本" status="error"/>
                <br/>
                <PlAlert label="提示状态下的提示文本" status="info"/>
                <br/>
                <PlAlert message="默认状态下的提示文本" label="默认状态" status="primary"/>
                <br/>
                <PlAlert message="成功状态下的提示文本" label="成功状态" status="success"/>
                <br/>
                <PlAlert message="警告状态下的提示文本" label="警告状态" status="warn"/>
                <br/>
                <PlAlert message="失败状态下的提示文本" label="失败状态" status="error"/>
                <br/>
                <PlAlert message="提示状态下的提示文本" label="提示状态" status="info"/>
            </div>

            <div class="doc-theme-title">$message 消息服务</div>
            <div class="doc-theme-space-line">
                <PlButton onClick={() => $$message.primary('提示信息！')} label="primary" status="primary"/>
                <PlButton onClick={() => $$message.success('提示信息！')} label="success" status="success"/>
                <PlButton onClick={() => $$message.warn('提示信息！')} label="warn" status="warn"/>
                <PlButton onClick={() => $$message.error('提示信息！')} label="error" status="error"/>
                <PlButton onClick={() => $$message.info('提示信息！')} label="help" status="info"/>
                <PlButton onClick={() => $$message.dark('提示信息！')} label="dark" style={{backgroundColor: '#333', border: 'none'}}/>
                <PlButton onClick={() => $$message.lite('提示信息！')} label="lite" style={{backgroundColor: 'white', border: 'solid 1px #ccc', color: '#333'}}/>
            </div>

            <div class="doc-theme-title">$dialog 对话框服务</div>
            <div class="doc-theme-space-line">
                {StoryStatus.map(item => <PlButton
                    status={item.status as any} key={item.status} label={item.label}
                    onClick={() => ($$dialog as any)[item.status]('操作进行中')}
                />)}
            </div>

            <div class="doc-theme-title">$notice 通知</div>
            <div class="doc-theme-space-line">
                <PlButton onClick={() => $$notice.primary('提示信息！')} label="primary" status="primary"/>
                <PlButton onClick={() => $$notice.success('提示信息！')} label="success" status="success"/>
                <PlButton onClick={() => $$notice.warn('提示信息！')} label="warn" status="warn"/>
                <PlButton onClick={() => $$notice.error('提示信息！')} label="error" status="error"/>
                <PlButton onClick={() => $$notice.info('提示信息！')} label="help" status="info"/>
                <PlButton onClick={() => $$notice('提示信息！', {status: null})} label="无状态" status="info"/>
            </div>

            <div class="doc-theme-title">表格 Table</div>
            <div class="doc-theme-space-line">
                <PlTable
                    data={state.data}
                    keyField="id">
                    <PlcIndex/>
                    <PlcCheck/>
                    <Plc field="id" title="编号"/>
                    <Plc field="name" title="普通文本列"/>
                    <PlcInput field="name" title="文本框" required/>
                    <PlcNumber field="size" title="数字框"/>
                    <PlcDate field="date" title="日期" required/>
                    <PlcColorPicker field="color" title="颜色"/>
                    <PlcRate field="star" title="评分"/>
                    <PlcToggle field="flag" title="开关"/>
                </PlTable>
            </div>

        </div>
    </div>
})
